<template>
	<view>
		<block v-if="value">
			<view class="live-item margin-lr padding-tb-sm solid-bottom space-between two overflow" @tap="goDetail" v-if="stype=='two'">
				<view class="thumb bg-gray relative">
					<image :src="value.thumb" mode="aspectFill"></image>
					<view class="mark" v-if="value.type == 2">
						<image class="playbtn" :src="CLOUDPATH+'/college/btn-play.png'" mode="aspectFill"></image>
					</view>
				</view>
				<view class="info w100 margin-left-sm overflow">
					<view class="title text-bold text-lg text-overflow-2">{{value.title}}</view>
					<view class="teacher w100 text-overflow">主讲人：{{value.lecturer_name}}</view>
					<view class="time flex-start text-gray align-center flex">
						<image :src="CLOUDPATH+'/college/icon-time.png'" mode="aspectFill" class="iconp"></image>
						<text v-if="value.start_time">{{$common.timeFormat(value.start_time)}}</text>
					</view>
				</view>
			</view>
			
			<view class="margin-lr bg-white radius margin-top one" @tap="goDetail" v-else-if="stype=='one'">
				<view class="relative thumb bg-gray align-center" style="display: flex;">
					<image :src="value.thumb" mode="widthFix" class="w100"></image>
					<view class="absolute w100 padding-sm text-cut bottom bg text-white">{{value.title}}</view>
					<image v-if="value.type == 2" class="absolute playbtn" :src="CLOUDPATH+'/college/btn-play.png'" mode="aspectFill"></image>
				</view>
				<view class="space-between padding-sm align-center overflow">
					<view class="text-bold text-cut">
						主讲人：{{value.lecturer_name}}
					</view>
					<view>
						<text v-if="value.stream_status == 1" class="text-red">直播中</text>
						<text v-else-if="value.type == 2" class="text-gray"><block v-if="value.start_time">{{$common.timeFormat(value.created_at,'YYYY-MM-DD')}}</block></text>
						<text v-else class="text-black"><block v-if="value.start_time">{{$common.timeFormat(value.start_time)}}开始</block></text>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: Object,
				default: null
			},
			stype: {
				type: String,
				default: 'one'
			}
		},
		created: function(e) {
			console.log(this.value)
		},
		data() {
			return {
				CLOUDPATH: this.$config.cloudPath,
				}
		},
		methods: {
			goDetail() {
				console.log(123)
				if (this.value.type == 1) {
					uni.navigateTo({
						url: '/collegePackages/pages/college/live/live?id=' + this.value.id
					})
				} else if (this.value.type == 2 || this.value.type == 3) {
					// #ifdef MP-WEIXIN
					let url = this.$config.H5Path + "/collegePackages/pages/college/video/detail?id=" + this.value.id + "&token=" + uni.getStorageSync('token')
					console.log(url)
					this.$common.setCache('webview_url', url,10*60)
					uni.navigateTo({
						url: "/pages/site/webview"
					})
					// #endif 
					
					// #ifdef H5
					uni.navigateTo({
						url: '/collegePackages/pages/college/video/detail?id=' + this.value.id
					})
					// #endif 
				}
			}
		},
	}
</script>

<style>
	.one .thumb {
		width: 100%;
		max-height: 400rpx;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.one .bottom {
		bottom: 0;
	}
	.one .bg{
		width: 100%;
		background-color: rgb(0,0,0,0.5);
	}
	
	.one .playbtn{
		width: 120rpx;
		height: 120rpx;
	}

	.two .thumb{
		width: 260rpx;
		height: 180rpx;
		min-width: 260rpx;
		overflow: hidden;
	}
	.two .thumb image{
		width: 100%;
		height: 100%;
	}
	.two .thumb .mark{
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: rgb(0,0,0,0.5);
		left: 0;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.two .thumb .playbtn{
		width: 80rpx;
		height: 80rpx;
	}
	.two .title{
		height: 88rpx;
		line-height: 44rpx;
	}
	.two .teacher{
		margin: 14rpx 0;
	}
	.iconp{
		width: 30rpx;
		height: 30rpx;
	}
</style>
